<template>
    <div class="message-content-my">
        <div class="name">我</div>
        <div class="content-text">
            <span>123123213123213213</span>
        </div>
        <div class="content-img">
            <img src="~@/assets/350-400.jpg" width="150"/>
        </div>
        <div>2019/10/10 10:10:10</div>
    </div>
</template>

<script>
    export default {
        name: "MessageContentMy"
    }
</script>

<style scoped>

    .message-content-other, .message-content-my {
        margin-bottom: 10px;
        min-height: 20px;
    }

    .message-content-other .name, .message-content-my .name {
        font-size: 14px;
    }

    .message-content-other .content-text span, .message-content-my .content-text span {
        display: inline-block;
        padding: 5px 5px;
        border-radius: 5px;
        background-color: #cccccc;
        font-size: 16px;
        color: #333333;
    }

    .message-content-other .content-text span {
        border: 1px solid #dee0e3;
        background-color: #dee0e3;
    }

    .message-content-my .content-text span {
        border: 1px solid #cce4fc;
        background-color: #cce4fc;
    }

    .message-content-other div {
        width: 100%;
    }

    .message-content-my div {
        width: 100%;
        text-align: right;
    }
</style>